<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:29px 29px 0;margin-bottom:32px;" v-show="lineType == '26'">
      <bar-chart :chartData="line26" v-if="lineType == '26'"/>
    </el-row>
    <el-row style="background:#fff;padding:29px 29px 0;margin-bottom:32px;" v-show="lineType == '27'">
      <bar-chart :chartData="line27" v-if="lineType == '27'"/>
    </el-row>
    <el-row style="background:#fff;padding:29px 29px 0;margin-bottom:32px;" v-show="lineType == '28'">
      <bar-chart :chartData="line28" v-if="lineType == '28'"/>
    </el-row>
    <el-row style="background:#fff;padding:29px 29px 0;margin-bottom:32px;" v-show="lineType == '29'">
      <line-chart :chartData="line29" v-if="lineType == '29'"/>
    </el-row>

    
  </div>
</template>

<script>
import { getChart} from "@/api/sys/chart";
import PanelGroup from './dashboard/PanelGroup'
import BarChart from '@/components/Charts/BarChart.vue'
import LineChart from '@/components/Charts/LineChart.vue'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    BarChart
  },
  data() {
    return {
      line26:null,
      line27:null,
      line28:null,
      line29:null,
      lineType: null,
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineType = type;
    }
  },
  created() {
    getChart(26).then(response => {
      this.line26 = response.data;
    });
    getChart(27).then(response => {
      this.line27 = response.data;
      this.lineType = "27";
    });
    getChart(28).then(response => {
      this.line28 = response.data;
    });
    getChart(29).then(response => {
      this.line29 = response.data;
    });
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 29px 29px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
